<template>
  <div class="store-industry">
    <el-row type="flex">
      <el-col :span="4">
        <el-input v-model.trim="firmName" placeholder="请输入行业名称" />
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="queryData">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <el-button type="primary" @click="addEdit">新增行业</el-button>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%; margin-bottom: 20px;"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        prop="date"
        label="行业名称"
        width="400"
        sortable
        :default-sort="{ prop: 'date' }"
      >
        <template #default="{row}">
          {{ row.industry_name }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="描述" width="400">
        <template #default="{row}">
          {{ row.descr }}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="text" @click="del(row.id)">删除</el-button>
          <el-button type="text" @click="edit(row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page.page"
      :page-size="page.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      :page-sizes="[2,5,10,20]"
      @current-change="changePage"
      @size-change="sizeChange"
    />
    <template>
      <el-dialog :title="showTitle" :visible="dialogTableVisible" width="50%" @close="changeDialog">
        <el-form ref="form" label-width="100px" :model="formData" :rules="rules">
          <el-form-item label="行业名称" prop="industry_name">
            <el-input v-model.trim="formData.industry_name" type="text" style="80%" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model.trim="formData.descr" type="text" style="80%" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-row type="flex" justify="center">
            <el-col :span="4.5">
              <el-button size="small" @click="changeDialog">取消</el-button>
              <el-button type="primary" size="small" @click="btnOK">确定</el-button>
            </el-col>
          </el-row>
        </template>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import { data, addData, delData, queryData, patchData, getData, dataList } from '@/api/shop/trade'
export default {
  name: 'StoreIndustry',
  data() {
    const checkNameRepeat = async(rule, value, callback) => {
      const { data } = await dataList()
      let isRepeat = false
      isRepeat = data.some(item => item.industry_name === this.formData.industry_name && item.id !== this.formData.id)
      if (isRepeat) {
        callback(new Error(`同级类别下已存在${value}`))
      }
      callback()
    }
    return {
      formData: {
        industry_name: '',
        descr: '',
        id: ''
      },
      rules: {
        industry_name: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
          { trigger: 'blur', validator: checkNameRepeat }
        ]
      },
      dialogTableVisible: false,
      firmName: '',
      page: {
        page: 1,
        pagesize: 10,
        total: 0
      },
      tableData: []
    }
  },
  computed: {
    showTitle() {
      return this.formData.id ? '编辑行业' : '添加行业'
    }
  },
  created() {
    this.getshopdata()
  },
  methods: {
    async queryData() {
      const res = await getData(this.firmName)
      this.tableData = res.data
    },
    changePage(newPage) {
      this.page.page = newPage
      this.firmName = ''
      this.getshopdata()
    },
    sizeChange(size) {
      this.page.pagesize = size
      this.firmName = ''
      this.getshopdata()
    },
    async edit(id) {
      this.dialogTableVisible = true
      const res = await queryData(id)
      this.formData = res.data
    },
    async getshopdata() {
      const att = await dataList()
      const res = await data(this.page)
      this.formData.id = res.data.id
      this.page.total = att.total
      this.tableData = res.data
    },
    async btnOK() {
      this.$refs.form.validate(async(isOK) => {
        if (isOK) {
          if (this.formData.id) {
            await patchData(this.formData)
          } else {
            await addData(this.formData)
          }
          this.getshopdata()
          this.dialogTableVisible = false
          if (this.formData.id) {
            this.$message.success('编辑成功')
          } else {
            this.$message.success('添加成功')
          }
        }
      })
    },
    async reset() {
      this.firmName = ''
      const res = await getData(this.firmName)
      this.tableData = res.data
    },
    changeDialog() {
      this.$refs.form.resetFields()
      this.dialogTableVisible = false
      this.formData = {
        industry_name: '',
        descr: ''
      }
    },
    addEdit() {
      this.dialogTableVisible = true
    },
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { type: 'warning' }).then(
        async() => {
          await delData(id)
          this.getshopdata()
          this.$message.success('删除成功')
        }
      )
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style lang="scss">
  .store-industry{
    min-width: 1200px
  }
</style>
